<template>
	<view class="userDetail">
		<view class="userList">
			<view class="userListCard" @click="uploadImage">
				<view class="userListCardText">
					<view>头像</view>
				</view>
				<view class="userListCardText">
					<image style="width: 39px;height: 39px;border-radius: 50%;margin-right: 5px;" :src="info.image"></image>
					<image style="width: 20px;margin: 0;" mode="widthFix" src="../../static/right.png"></image>
				</view>
			</view>
			<view class="userListCard" @click="show = true">
				<view class="userListCardText">
					<view>用户名</view>
				</view>
				<view class="userListCardText">
					<view style="margin-right: 5px" class="inputBox">
						<input type="text" v-model="info.name" @blur="uploadInfo">
					</view>
					<image style="width: 20px;margin: 0;" mode="widthFix" src="../../static/right.png"></image>
				</view>
			</view>
			<view class="userListCard">
				<view class="userListCardText">
					<view>手机号</view>
				</view>
				<view class="userListCardText">
					<view>{{getPhoneText(info.phone)}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getUserInfo, infoUpdate } from '@/api/home.js'
	import baseUrl from '@/utils/baseUrl.js'
	export default{
		data() {
			return {
				show: false,
				info: {
					image:'',
					phone:''
				}
			}
		},
		onShow() {
			getUserInfo().then(res=>{
				console.log(res.data,'data')
				this.info = res.data
			})
		},
		methods:{
			uploadImage(){
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择,或者使用相
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths
						uni.uploadFile({
							url:baseUrl+'/api/common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								file: tempFilePaths[0]
							},
							header: {
								'token': uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data)
								this.info.image = baseUrl+res.data
								this.uploadInfo()
							}
						})
					}
				})
			},
			uploadInfo(){
				infoUpdate({image:this.info.image,name:this.info.name}).then(res=>{
					uni.showToast({
					  title: '修改成功',
					  icon: 'success'
					});
				})
			},
			getPhoneText(tel) {
				if(!tel) return ''
				const reg = /^(\d{3})(\d{4})(\d{4})$/
				const a = tel.replace(reg, "$1****$2")
				return a
			},
		}
	}
</script>

<style scoped lang="less">
	.userDetail{
		padding: 10px;
		.userList{
			.userListCard{
				background-color: #fff;
				border-radius: 4PX;
				padding: 15px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				::after{
					content: '';
					position: absolute;
					width: 92%;
					height: 1px;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
					background-color: #f5f5f5;
				}
				.userListCardText{
					display: flex;
					align-items: center;
					font-size: 14px;
					.inputBox{
						input{
							text-align: right;
							border-bottom: none;
							::after{
								height: 0;
							}
						}
					}
					image{
						margin-right: 10px;
					}
				}
			}
		}
	}
</style>